<!-- 超出部分显示省略号，鼠标悬浮显示详细文本 -->
<template>
  <el-tooltip effect="dark" :content="tipValue" placement="top-start" :disabled="isShowTooltip">
    <div @mouseover="onMouseOver(refTipName)" class="overflowhidden"><span :ref="refTipName">{{tipValue}}</span></div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    tipValue: {
      type: String,
      default: ''
    },
    refTipName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    // 判断是否开启tooltip功能
    onMouseOver (str) {
      let parentWidth
      let contentWidth
      if (this.$refs[str] instanceof Array) {
        parentWidth = this.$refs[str][0].parentNode.offsetWidth
        contentWidth = this.$refs[str][0].offsetWidth
      } else {
        parentWidth = this.$refs[str].parentNode.offsetWidth
        contentWidth = this.$refs[str].offsetWidth
      }
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
.overflowhidden{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
